<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>原式：{{message}}</h3>
        <h3>表达式翻转后{{message.split('').reverse().join('')}}</h3>
        <p>计算 ：表达式反转后: "{{ reversedMessage }}"</p>
        <!-- 方法 -->
        <p>方法 ：表达式反转后: "{{reversedMessage()}}"</p>
        <!--  -->
        <p>watch:{{wmsg}}</p>

    </div>
    <!-- 对于任何复杂逻辑，你都应当使用计算属性 -->
    <!-- 某个表达式 通过某种运算 从 一个状态生成（派生） 另外一个状态 可以用计算属性 -->
    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                message: 'Hello',
                arr:[11,44,22,5,33,521],
                wmsg:"dlrow olleh",
                a:10,
                b:20,
                wsum:30
            },
            computed: {
                // 计算属性的 getter
                reversedMessage: function () {
                    // `this` 指向 vm 实例
                    return this.message.split('').reverse().join('')                
                },
                //数组有两种方法
                //会改变原始数组（变更方法） 返回新数组，不改变原始数组的（非变更方法）
                //(push pop shift unshift splice)  slice concat sort filter
                //所有的变更方法都不会响应，除了括号这五个方法
                //所有的非变更方法 都可以响应
                odd:function(){
                    return this.arr.filter((n)=>n%2)
                },
                even:function(){
                    return this.arr.filter((n)=>!(n%2))
                },
                cnow:function(){
                    return Date.now();
                },
                sum:function(){
                    return this.a+this.b;
                }
            },
            //方法
            methods:{
                reversedMessage:function(){
                    return this.message.split("").reverse().join("");
                },
                mnow:function(){
                    return Date.now();
                }
            },
            created:function(){
                // setInterval(()=>{
                //     console.log(this.cnow,this.mnow);
                // },1000);
            },
            watch:{
                message:function(n,o){
                    //console.log(n,o)
                    this.wmsg=n.split("").reverse().join("");
                },
                a:function(n,o){
                    this.wmsg= n+this.b;
                },
                b:function(n,o){
                    this.wmsg=this.a+n;
                }

            }
        })
        // vm.$watch();
    </script>
</body>

</html>